【day8】關於 CSS的line-height與vertical-align 屬性

2019 iT 邦幫忙鐵人賽

DAY 7

自我挑戰組

CSS、JS-30天研究筆記系列第 8 篇

2019鐵人賽

Amy

2018-10-08 23:46:11

1648 瀏覽

分享至

如何讓圖示和文字垂直對齊?大概會讓人直覺想到設置vertical-align:middle吧!
但在「CSS世界」書中提到，middle 指的是基線往上 1/2 x-height 高度，近似字母x交叉點的位置，而這個位置不同字型會略有差異，所以設置vertical-align:middle有時並沒辦法垂直對齊。
*基線:X字母的下邊線
*x-height:字母x的高度
並且建議使用CSS的相對單位之一"ex"，實現圖示和文字水平對齊的方法，不限字型、字級都可以完美的水平對齊:

<style>
  .icon-arrow {
    display: inline-block;
    width: 10px;
    height: 1ex;
    background-image: url(http://t.cn/EhkL2Dp);
    background-size: contain;
    background-repeat: no-repeat;
  } 
  .sf { font-size: 16px;}
  .bf { font-size: 32px;}
</style>
<body>
  <span class="sf">向下展開<i class="icon-arrow"></i></span>
  <span class=" bf">向下展開<i class="icon-arrow"></i></span>
</body>

参考資料:
vertical-align:middle 效果演示-歪脖网